<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="referrer" content="never">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title id='title'>Chat</title>
    <meta name="renderer" content="webkit">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
    <link rel="stylesheet" href="http://cdn.amazeui.org/amazeui/2.7.2/css/amazeui.min.css">
    <script src="http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/layer/2.3/layer.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/cq-websocket/dist/cq-websocket.min.js"></script>
</head>

<body>
    <div id="app" style="width: 100%;">
        <header class="am-topbar am-topbar-inverse">
            <img style="max-width: 50px;max-height: 50px;" :src="'http://p.qlogo.cn/gh/' + active + '/' + active +'/640/'"/>
            <h1 class="am-topbar-brand">{{active}}</h1>
                <div class="am-topbar-right">
                    <button class="am-btn am-btn-primary am-topbar-btn am-btn-sm" @click="sett=!sett">设置</button>
                </div>
        </header>
        <div v-if="sett">
            <button class="am-btn am-btn-default" @click="NotificationOn=!NotificationOn">Switch Windows
                Notification</button>
            <button class="am-btn am-btn-default" @click="manageMode=!manageMode">Switch manage</button>
        </div>
        <div v-for="t in msglist" style="left:0px;width:10%;">
            <div @click="active=t">
                <img style="width: 50px;height: 50px;" :src="'http://p.qlogo.cn/gh/' + t + '/' + t +'/640/'"/>
            </div>
        </div>
        <div id="main_msg" style="position: relative;top:5%;left:10%;">
            <ul class="am-comments-list am-comments-list-flip">
                <div v-for="i in contexts">
                    <li class="am-comment" v-if="i.message_type=='private'" v-show="i.user_id==active">
                        <a href="">
                            <img class="am-comment-avatar" alt="" :src="'https://q2.qlogo.cn/headimg_dl?dst_uin=' + i.user_id + '&spec=100'" />
                        </a>
                        <div class="am-comment-main">
                            <header class="am-comment-hd">
                                <div class="am-comment-meta">
                                    <a href="#link-to-user" class="am-comment-author">{{i.sender.nickname}}</a>
                                    <time datetime=""></time>
                                </div>
                            </header>
                            <div class="am-comment-bd" v-html="i.message"></div>
                        </div>
                    </li>
                    <li class="am-comment" v-if="i.message_type=='group'" v-show="i.group_id==active">
                        <a href="">
                            <img class="am-comment-avatar" alt="" :src="'https://q2.qlogo.cn/headimg_dl?dst_uin=' + i.user_id + '&spec=100'" />
                        </a>
                        <div class="am-comment-main">
                            <header class="am-comment-hd">
                                <div class="am-comment-meta">
                                    <a href="#link-to-user" class="am-comment-author" v-if="i.sender.card!=''">{{i.sender.card}}</a>
                                    <a href="#link-to-user" class="am-comment-author" v-if="i.sender.card==''">{{i.sender.nickname}}</a>
                                    <time datetime=""></time>
                                </div>
                            </header>
                            <div class="am-comment-bd" v-html="i.message"></div>
                            <footer class="am-comment-footer" v-if="manageMode">
                                <div class="am-comment-actions">
                                    <button @click="blacklist.push(i.group_id)" v-if="!$.inArray(i.group_id,blacklist)">屏蔽此群</button>
                                    <button @click="blacklist.splice($.inArray(i.group_id,blacklist))" v-if="$.inArray(i.group_id,blacklist)">取消屏蔽</button>
                                </div>
                            </footer>
                        </div>
                    </li>
                </div>
            </ul>
        </div>
    </div>
    <script>
        reg_img = /(.*)\[CQ:image,file=(.*),url=(.*)\](.*)/i
        reg_at = /(.*)\[CQ:at,qq=(.*)\](.*)/i
        app = new Vue({
            el: "#app",
            data: {
                contexts: [], manageMode: false, blacklist: [], msgg: '', top: '', sett: false, NotificationOn: true,
                active: '', msglist: []
            }
        })
        const CQ = new window.CQWebSocket()
        CQ
            .on('socket.error', console.error)
            .on('socket.connecting', (wsType, attempts) => console.log('尝试第 %d 次连线 _(:з」∠)_', attempts))
            .on('socket.connect', (wsType, sock, attempts) => console.log('第 %d 次连线成功 ヽ(✿ﾟ▽ﾟ)ノ', attempts))
            .on('socket.failed', (wsType, attempts) => console.log('第 %d 次连线失败 。･ﾟ･(つд`ﾟ)･ﾟ･', attempts))
            .on('api.response', (resObj) => console.log('服务器响应: %O', resObj))
            .on('socket.close', (wsType, code, desc) => console.log('[%s] 连接关闭(%d: %s)', wsType, code, desc))
            .on('ready', () => console.log('初始化完成，开始处理消息'))
            .on('message.private', (e, context) => {
                console.log(context)
                var data = processPrivate(context);
                if (data != null) {
                    replyPrivate(data);
                    app.contexts.push(data)
                    if (app.NotificationOn) {
                        WindowsMsg = new Notification(data.sender.nickname, {
                            body: data.raw,
                            icon: "https://q2.qlogo.cn/headimg_dl?dst_uin=" + data.user_id + "&spec=100",
                            renotify: true,
                            tag: "P_" + data.user_id
                        });
                        console.log("Notification")
                    }
                    if ($.inArray(data.user_id,app.msglist)==-1) app.msglist.push(data.user_id);
                    if (app.active == '') app.active = data.user_id;
                }
            })
            .on('message.group', (e, context) => {
                console.log(context)
                var data = processGroup(context);
                if (data != null) {
                    replyGroup(data);
                    app.contexts.push(data)
                    if (app.NotificationOn) {
                        WindowsMsg = new Notification((data.sender.card != '') ? data.sender.card : data.sender.nickname, {
                            body: data.raw, icon: "http://p.qlogo.cn/gh/" + data.group_id + "/" + data.group_id + "/640/",
                            renotify: true, tag: "G_" + data.group_id
                        });
                        console.log("Notification")
                    }
                    if ($.inArray(data.group_id,app.msglist)==-1) app.msglist.push(data.group_id);
                    if (app.active == '') app.active = data.group_id;
                }
            })
        function processGroup(data) {
            if ($.inArray(data.group_id, app.blacklist) != -1) return null;
            var context = data;
            var tmp
            context.id = context.group_id
            context.raw = context.message
            tmp = reg_img.exec(context.message)
            while (tmp != null) {
                context.message = tmp[1] + "<img rel='noreferrer' style='max-width:300px;max-height:300px;' src=" + tmp[3] + ">" + tmp[4]
                tmp = reg_img.exec(context.message)
            }
            tmp = reg_img.exec(context.raw)
            while (tmp != null) {
                context.raw = tmp[1] + "[图片]" + tmp[4]
                tmp = reg_img.exec(context.raw)
            }
            tmp = reg_at.exec(context.message)
            while (tmp != null) {
                context.message = tmp[1] + " @" + tmp[2] + " " + tmp[3]
                tmp = reg_at.exec(context.message)
            }
            tmp = reg_at.exec(context.raw)
            while (tmp != null) {
                context.raw = tmp[1] + " @" + tmp[2] + " " + tmp[3]
                tmp = reg_at.exec(context.raw)
            }
            return context;
        }
        function processPrivate(data) {
            var context = data;
            var tmp
            content.id = context.user_id
            context.raw = context.message
            tmp = reg_img.exec(context.message)
            while (tmp != null) {
                context.message = tmp[1] + "<img rel='noreferrer' style='max-width:300px;max-height:300px;' src=" + tmp[3] + ">" + tmp[4]
                tmp = reg_img.exec(context.message)
            }
            tmp = reg_img.exec(context.raw)
            while (tmp != null) {
                context.raw = tmp[1] + "[图片]" + tmp[4]
                tmp = reg_img.exec(context.raw)
            }
            return context;
        }
        function replyGroup(data) {
            if (data.message == "出题") {
                CQ('send_group_msg', { group_id: data.group_id, message: '题库为空或不存在，请核对！' });
            }
            if (data.message == "公布答案") {
                CQ('send_group_msg', { group_id: data.group_id, message: '还没有出题！' })
            }
            return;
        }
        function replyPrivate(data) {
            return;
        }
        function HTMLEncode(html) {
            var temp = document.createElement("div")(temp.textContent != null) ? (temp.textContent = html) : (temp.innerText = html)
            var output = temp.innerHTML; temp = null; return output
        }
        Notification.requestPermission().then(function (result) {
            if (result == "denied") layer.msg("Error:Permission denied.")
            if (result == "granted") layer.msg("Success")
        })
        CQ.connect()
    </script>
    <script id="EncodeUtf8">
        function EncodeUtf8(a) { var e, b = escape(a), c = b.split("%"), d = ""; for ("" != c[0] && (d = c[0]), e = 1; e < c.length; e++)d += "u" == c[e].substring(0, 1) ? fb(fa(c[e].substring(1, 5))) : "%" + c[e]; return d } function fa(s) { var n, i, c = "", ss = "0123456789ABCDEF", digS = ""; for (i = 0; i < s.length; i++)c = s.charAt(i), n = ss.indexOf(c), digS += fc(eval(n)); return digS } function fc(a) { var d, b = "", c = 0; for (d = 0; 4 > d; d++)c = Math.pow(2, 3 - d), a >= c ? (b += "1", a -= c) : b += "0"; return b } function fd(s) { var i, retV = 0; if (4 == s.length) { for (i = 0; 4 > i; i++)retV += eval(s.charAt(i)) * Math.pow(2, 3 - i); return retV } return -1 } function fb(s) { var sss, i, retS = "", tempS = "", ss = ""; if (16 == s.length) { for (tempS = "1110" + s.substring(0, 4), tempS += "10" + s.substring(4, 10), tempS += "10" + s.substring(10, 16), sss = "0123456789ABCDEF", i = 0; 3 > i; i++)retS += "%", ss = tempS.substring(8 * i, 8 * (eval(i) + 1)), retS += sss.charAt(fd(ss.substring(0, 4))), retS += sss.charAt(fd(ss.substring(4, 8))); return retS } return "" }
    </script>
</body>

</html>